
<template>
    <div class="threeJsPrc111">
      <div class="myCanvas" ref="myCanvas"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import logo from '../../assets/logo.png';
const optionImages = import.meta.globEager('../../assets/*.png');
const scene = new THREE.Scene();
scene.add(new THREE.AxesHelper(250));
const camera = new THREE.PerspectiveCamera();
camera.fov = 70;
camera.near = 1;
camera.near = 10000;
const renderer = new THREE.WebGLRenderer({
  alpha: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(0xb9d3ff, 1);

@Options({ components: {
} })
export default class ThreeJsPrc111 extends Vue {
  public rect: DOMRect|null=null;
  public dpr =750 / window.innerWidth;
  public controls!: OrbitControls;

  public sphereMesh(R: number, x: number, y: number, z: number) {
    const geometry = new THREE.SphereGeometry(R, 25, 25);
    const material = new THREE.MeshPhongMaterial({
      color: 0x0000ff,
    });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(x, y, z);
    return mesh;
  }
  public boxMesh(width: number, height: number, depth: number, x: number, y: number, z: number) {
    const geometry = new THREE.BoxGeometry(width, height, depth);
    const material = new THREE.MeshPhongMaterial({
      color: 0x0000ff,
    });
    const mesh  = new THREE.Mesh(geometry, material);
    mesh.position.set(x, y, z);
    return mesh;
  }
  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    (this.$refs.myCanvas as HTMLDivElement).append(renderer.domElement);
    renderer.setPixelRatio(this.dpr);
    renderer.setSize(this.rect.width, this.rect.height, false);
    camera.aspect = this.rect.width / this.rect.height;
    camera.position.set(200, 100, 200);
    camera.lookAt(scene.position);
    renderer.render(scene, camera);

    const mesh1 = this.boxMesh(100, 100, 10, 0, 0, 0);
    mesh1.name = 'Box';
    const mesh2 = this.sphereMesh(10, 10, 10, 10);
    mesh2.name = 'Sphere';
    const group = new THREE.Group();
    group.add(mesh1);
    group.add(mesh2);

    // const times = [0, 10];
    // const values = [0, 0, 0, 150, 0, 0];
    // const posTrack = new THREE.KeyframeTrack('Box.position', times, values);
    // const colorKF  = new THREE.KeyframeTrack('Box.material.color', [10, 20], [1, 0, 0, 0, 0, 1]);
    // const scaleTrack = new THREE.KeyframeTrack('Sphere.scale', [0, 20], [1, 1, 1, 3, 3, 3]);
    // const duration = 20;
    // const clip = new THREE.AnimationClip('default', duration, [posTrack, colorKF, scaleTrack]);
    // const mixer = new THREE.AnimationMixer(group);
    // const animationAction = mixer.clipAction(clip);
    // animationAction.timeScale = 20;
    // animationAction.play();

    const clock = new THREE.Clock();

    renderer.setAnimationLoop(() => {
      renderer.render(scene, camera);
      // mixer.update(clock.getDelta());
    });

    this.controls = new OrbitControls(camera, renderer.domElement);
  }
}
</script>

<style lang="postcss" scoped>
.threeJsPrc111{
  touch-action: none;
  width: 100%;
  height: 100%;
  background: grey;
}
</style>
